<template>
  <dtDialog
    title="预览"
    :visible.sync="dialogVisible"
    :is-loading="loading"
    destroy-on-close
    :confirm-hidden="true"
  >
    <div style="min-height: 300px;">
      <div v-loading="loadWait"></div>
      <iframe v-if="isError" ref="customerFromRef" title=""
              class="iframe_body"
              :src="customFormUrl" frameborder="0" width="100%"
              scrolling="auto"  @load="handleIframeLoad" />
      <!-- <div style="text-align: center;" v-if="!isError">
        <div>
          <img src="../../../../../assets/loadError.png" alt="">
        </div>
        <el-button type="primary" size="mini" @click="reload">请重新加载</el-button>
      </div> -->
    </div>
  </dtDialog>
</template>
<script>
export default {

  data() {
    return {
      iframeData: {},
      dialogVisible: false,
      loading: false,
      customFormUrl: '',
      loadWait: true,
      isError: true
    }
  },
  // created() {
  //   window.onerror = function (message, source, lineno, colno, error) {
  //     this.loadWait = false
  //     this.isError = false
  //   }
  // },
  methods: {
    handleIframeLoad() {
      this.loadWait = false
      // this.isError = false
    },
    openPreview(row) {
      this.loadWait = true
      this.isError = true
      this.dialogVisible = true
      this.iframeData = row
      this.iframeLoad(this.iframeData)
    },
    iframeLoad(row) {
      this.customFormUrl = row.formUrl
      setTimeout(() => {
        this.$nextTick(() => {
          const iframe = this.$refs.customerFromRef
          const content = iframe.contentWindow
          content.postMessage({
            cmd: 'success',
            data: {}
          }, '*')
        })
      }, 1000)
    }
    // handleError() {
    //   this.loadWait = false
    //   this.isError = false
    // },
    // reload() {
    //   this.loadWait = true
    //   this.isError = true
    // }
  }
}
</script>
<style scoped lang="scss">
.iframe_body{
  height: 400px;
}
</style>

